<template>
  <div class="out">
    <div class="out-title">成品出库检测</div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="out_id" label="出库成品编号" width="180">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.out_id }}</span>
          <el-input v-else v-model="scope.row.out_id"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="out_date" label="发货日期" width="232">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.out_date }}</span>
          <el-date-picker
            v-else
            v-model="scope.row.out_date"
            type="date"
            placeholder="Pick a day"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </template>
      </el-table-column>
      <el-table-column prop="out_qualify" label="出库合格情况">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.out_qualify }}</span>
          <el-select
            v-else
            v-model="scope.row.out_qualify"
            @change="handleEditComplete(scope.$index, scope.row, 'out_qualify')"
          >
            <el-option
              v-for="item in Eligibility"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="out_QAid" label="质检员编号" width="180">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.out_QAid }}</span>
          <el-input v-else v-model="scope.row.out_QAid"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="department" label="责任部门">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.department }}</span>
          <el-input v-else v-model="scope.row.department" disabled></el-input>
          <!-- <el-select v-else v-model="scope.row.department">
            <el-option
              v-for="item in departments"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
        </template>
      </el-table-column>
      <el-table-column prop="message" label="备注" width="180">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.message }}</span>
          <el-input v-else v-model="scope.row.message" disabled></el-input>
          <!-- <el-select v-else v-model="scope.row.message">
            <el-option
              v-for="item in remark"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
        </template>
      </el-table-column>
      <el-table-column prop="option" label="操作" width="180">
        <template #default="scope">
          <!-- <el-button
            link
            type="primary"
            size="small"
            @click.prevent="update(scope.$index)"
            v-if="!scope.row.editing"
          >
            编辑
          </el-button> -->
          <el-button
            link
            type="primary"
            size="small"
            v-if="scope.row.editing"
            @click.prevent="confirm(scope.$index, scope.row)"
          >
            确认
          </el-button>
          <el-button
            link
            v-if="scope.row.editing"
            type="primary"
            size="small"
            @click.prevent="cancel(scope.$index)"
          >
            取消
          </el-button>
          <!-- <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
          >
            删除
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import "./index.scss";
import { outAdd } from "@/request/axios";
import { ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { departments, Eligibility, remark } from "./index.config.ts";
const params = {
  out_id: "",
  out_date: "",
  out_qualify: "",
  out_QAid: "",
  department: "",
  message: "",
  editing: true,
};
let tableData = ref([]);
onMounted(() => {
  tableData.value = [];
  tableData.value.push(params);
});
// 取消
const cancel = (index) => {
  tableData.value[index].editing = false;
  tableData.value.splice(index, 1);
  tableData.value.push({
    out_id: "",
    out_date: "",
    out_qualify: "",
    out_QAid: "",
    department: "",
    message: "",
    editing: true,
  });
};
const handleEditComplete = (index, data, key) => {
  if (tableData.value[index][key] == "合格") {
    tableData.value[index].department = "销售部门";
    tableData.value[index].message = "销售部联系物流！";
  } else {
    tableData.value[index].department = "维修部门";
    tableData.value[index].message = "维修部请维修";
  }
};
// 确定
const confirm = async (index, data) => {
  tableData.value[index].editing = false;
  const res = await outAdd(data);
  if (res?.data?.success) {
    ElMessage({
      message: res?.data?.message,
      type: "success",
    });
  } else {
    ElMessage({
      message: res?.data?.message,
      type: "warning",
    });
  }
  tableData.value.splice(index, 1);
  tableData.value.push({
    out_id: "",
    out_date: "",
    out_qualify: "",
    out_QAid: "",
    department: "",
    message: "",
    editing: true,
  });
};
// 删除
const deleteRow = (index) => {
  tableData.value.splice(index, 1);
};
</script>
<style scoped></style>
